<template>
  <div class="login-container">
    <a-row justify="center" align="middle" class="full-height">
      <a-col :xs="22" :sm="20" :md="18" :lg="16" :xl="14" :xxl="12">
        <a-card :bordered="false" class="login-card">
          <div class="login-header">
            <img src="/favicon.ico" alt="Logo" class="logo" />
            <h1>宿舍维修报修平台</h1>
            <p>欢迎登录系统</p>
          </div>

          <a-form
            ref="formRef"
            :model="loginForm"
            :rules="rules"
            @finish="handleLogin"
            class="login-form"
            layout="vertical"
          >
            <a-form-item label="账号" name="accountName">
              <a-input
                v-model:value="loginForm.accountName"
                size="large"
                placeholder="请输入账号"
                :prefix="h(UserOutlined)"
              />
            </a-form-item>

            <a-form-item label="密码" name="password">
              <a-input-password
                v-model:value="loginForm.password"
                size="large"
                placeholder="请输入密码"
                :prefix="h(LockOutlined)"
                @keyup.enter="handleLogin"
              />
            </a-form-item>

            <a-form-item style="margin-bottom: 16px;">
              <a-button
                type="primary"
                html-type="submit"
                size="large"
                block
                :loading="userStore.loading"
                class="login-button"
              >
                登录
              </a-button>
            </a-form-item>

            <a-form-item style="margin-bottom: 0;">
              <div class="login-footer-links">
                <span>还没有账号？</span>
                <a @click="router.push('/register')" class="register-link">立即注册</a>
              </div>
            </a-form-item>
          </a-form>
          <!-- 非正式环境显示 -->
          <div v-if="isNotProd" class="login-footer">
            <a-divider>
              <span class="divider-text">系统说明</span>
            </a-divider>
            <div class="system-info">
              <p><strong>用户类型说明：</strong></p>
              <ul>
                <li><a-tag color="#769fcd">学生</a-tag> 可以创建工单、查看自己的工单、评价服务</li>
                <li><a-tag color="#52c41a">维修工</a-tag> 可以处理分配的工单、管理物料</li>
                <li><a-tag color="#ff4d4f">管理员</a-tag> 拥有所有权限，可以管理用户、分配工单</li>
              </ul>
            </div>
          </div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, h, computed } from 'vue'
import { useUserStore } from '@/stores/user'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import type { FormInstance, Rule } from 'ant-design-vue/es/form'
import type { UserLoginRequest } from '@/types'
import { useRouter } from 'vue-router'

const isNotProd = computed(() => import.meta.env.MODE !== 'production');
const userStore = useUserStore()
const router = useRouter()
const formRef = ref<FormInstance>()

// 表单数据
const loginForm = reactive<UserLoginRequest>({
  accountName: '',
  password: ''
})

// 表单验证规则
const rules: Record<string, Rule[]> = {
  accountName: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 3, max: 20, message: '账号长度为3-20个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' }
  ]
}

// 登录处理
const handleLogin = async () => {
  try {
    await formRef.value?.validate()
    const success = await userStore.login(loginForm)
    if (!success) {
      // 如果登录失败，userStore.login 已经处理了错误信息显示
      console.error('登录失败')
    }
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}
</script>

<style scoped>
.login-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f7fbfc 0%, #d6e6f2 50%, #b9d7ea 100%);
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.full-height {
  min-height: 100vh;
  width: 100%;
}

.login-card {
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(118, 159, 205, 0.15);
  overflow: hidden;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  width: 100%;
  min-height: 600px;
}

.login-header {
  text-align: center;
  padding: 60px 48px 40px;
  background: linear-gradient(135deg, #769fcd 0%, #b9d7ea 100%);
  color: white;
  position: relative;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(118, 159, 205, 0.9) 0%, rgba(185, 215, 234, 0.8) 100%);
  z-index: 1;
}

.login-header > * {
  position: relative;
  z-index: 2;
}

.logo {
  width: 72px;
  height: 72px;
  margin-bottom: 20px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px;
  justify-self: center;
}

.login-header h1 {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.login-header p {
  margin: 0;
  opacity: 0.95;
  font-size: 16px;
  font-weight: 400;
}

.login-form {
  padding: 60px 48px 48px;
  min-height: 300px;
}

.login-form :deep(.ant-form-item) {
  margin-bottom: 32px;
}

.login-form :deep(.ant-form-item-label) {
  font-weight: 600;
  color: #333;
  font-size: 15px;
  margin-bottom: 8px;
}

.login-form :deep(.ant-input-affix-wrapper) {
  border: 2px solid #e8f4f8;
  border-radius: 8px;
  transition: all 0.3s ease;
  height: 48px;
  font-size: 15px;
}

.login-form :deep(.ant-input-affix-wrapper:focus),
.login-form :deep(.ant-input-affix-wrapper-focused) {
  border-color: #769fcd;
  box-shadow: 0 0 0 2px rgba(118, 159, 205, 0.2);
}

.login-button {
  height: 52px;
  font-size: 17px;
  font-weight: 600;
  border-radius: 8px;
  background: linear-gradient(135deg, #769fcd 0%, #b9d7ea 100%);
  border: none;
  box-shadow: 0 4px 12px rgba(118, 159, 205, 0.3);
  transition: all 0.3s ease;
  margin-top: 8px;
}

.login-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(118, 159, 205, 0.4);
}

.login-footer {
  padding: 32px 48px 48px;
  background: #f8fafb;
  margin: 0 -48px -48px;
  border-top: 1px solid #e8f4f8;
  min-height: 200px;
}

.divider-text {
  color: #769fcd;
  font-size: 13px;
  font-weight: 500;
}

.system-info {
  font-size: 14px;
  color: #666;
  background: white;
  padding: 24px;
  border-radius: 12px;
  border: 1px solid #e8f4f8;
  box-shadow: 0 2px 8px rgba(118, 159, 205, 0.08);
}

.system-info p {
  margin: 0 0 12px;
  font-weight: 600;
  color: #333;
}

.system-info ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.system-info li {
  margin: 12px 0;
  line-height: 1.8;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.login-footer-links {
  text-align: center;
  color: #666;
  font-size: 14px;
}

.register-link {
  color: #769fcd !important;
  text-decoration: none;
  margin-left: 6px;
  font-weight: 600;
  transition: color 0.3s ease;
}

.register-link:hover {
  color: #5a7ba8 !important;
  text-decoration: underline;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-container {
    padding: 16px;
  }

  .login-card {
    border-radius: 12px;
    margin: 0;
    min-height: 500px;
  }

  .login-header {
    padding: 40px 32px 28px;
    min-height: 140px;
  }

  .login-header h1 {
    font-size: 24px;
  }

  .login-header p {
    font-size: 14px;
  }

  .login-form {
    padding: 40px 32px 32px;
    min-height: 240px;
  }

  .login-form :deep(.ant-form-item) {
    margin-bottom: 24px;
  }

  .login-form :deep(.ant-input-affix-wrapper) {
    height: 44px;
    font-size: 14px;
  }

  .login-button {
    height: 48px;
    font-size: 16px;
  }

  .login-footer {
    padding: 24px 32px 32px;
    margin: 0 -32px -32px;
    min-height: 140px;
  }

  .system-info {
    font-size: 13px;
    padding: 16px;
  }

  .system-info li {
    margin: 8px 0;
    gap: 8px;
    padding: 4px 0;
  }
}

@media (max-width: 480px) {
  .login-container {
    padding: 12px;
  }

  .login-card {
    min-height: 450px;
  }

  .login-header {
    padding: 32px 24px 24px;
    min-height: 120px;
  }

  .login-header h1 {
    font-size: 22px;
  }

  .login-form {
    padding: 32px 24px 24px;
    min-height: 200px;
  }

  .login-form :deep(.ant-form-item) {
    margin-bottom: 20px;
  }

  .login-footer {
    padding: 20px 24px 24px;
    margin: 0 -24px -24px;
    min-height: 120px;
  }

  .login-button {
    height: 44px;
    font-size: 15px;
  }

  .system-info {
    font-size: 12px;
    padding: 12px;
  }

  .system-info li {
    margin: 6px 0;
    gap: 6px;
    padding: 2px 0;
  }
}
</style>
